<template>
    <div id="pay">
        <el-row style="padding-bottom:30px">
            <dv-decoration-11 style="width:200px;height:60px;color: whitesmoke;">开销报表</dv-decoration-11>
        </el-row>
        <el-row :gutter="20" style="padding-bottom:30px">
             <el-col :span="12">
                 <dv-border-box-10 style="width:100%;height:100%">
                     <div ref="pay" id="chart1" style="width:100%;height:350px;"></div>
                 </dv-border-box-10>
             </el-col>
             <el-col :span="12">
                 <dv-border-box-10 style="width:100%;height:100%">
                     <div ref="pay2" id="chart2" style="width:100%;height:350px;"></div>
                 </dv-border-box-10>
             </el-col>
             <el-col :span="12">
             </el-col>
        </el-row>
        <el-row :gutter="5">
            <el-col :span="10">
                <dv-border-box-10 style="width:100%;height:100%">
                    <div id="chart3" ref="pay3" style="width:95%;height:340px;"></div>
                </dv-border-box-10>
            </el-col>
            <el-col :span="7">
                <dv-border-box-10 style="width:100%;height:405px;" class="box8">
                    <div id="chart5" ref="pay5" style="width:100%;height:400px;"></div>
                </dv-border-box-10>
            </el-col>
            <el-col :span="7">
                <dv-border-box-10 style="width:100%;height:410px;" id="box10">
                    <dv-decoration-7 style="width:150px;height:30px;color: whitesmoke;margin-bottom:50px">距离目标营业额</dv-decoration-7>
                    <dv-water-level-pond :config="config" style="width:150px;height:200px" />
                </dv-border-box-10>
                <!-- <div style="width:95%;height:420px;"></div> -->
            </el-col>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            oriw1: '',
            oriw2: '',
            oriw3: '',
            oriw5: '',
            config: {
                data: [66],
                shape: 'round'
            }
        }
    },
    mounted() {
        // this.makechart()
        this.makechart2()
        this.makechart4()
        this.makechart3()
        this.makechart5()
    },
    methods: {
        makechart2() {
            const myChart1 = echarts.init(this.$refs.pay)
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fffff'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: [
                        {name: '加工支出', textStyle:{color:"#FAFAFA"}},
                        {name: '养殖支出', textStyle:{color:"#FAFAFA"}},
                        {name: '工资支出', textStyle:{color:"#FAFAFA"}},
                        {name: '其它支出', textStyle:{color:"#FAFAFA"}}
                    ]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FAFAFA'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '金额',
                        min: 0,
                        max: 10,
                        interval: 2,
                        axisLabel: {
                            formatter: '{value} 万元'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FAFAFA'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '金额',
                        min: 0,
                        max: 10,
                        interval: 2,
                        axisLabel: {
                            formatter: '{value} 万元'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#FAFAFA'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '加工支出',
                        type: 'bar',
                        data: [2, 3.2514, 2.1036, 1.0025, 4.6613, 1.5658, 1.3560, 1.6220, 3.2600, 2, 6, 3.3]
                    },
                    {
                        name: '养殖支出',
                        type: 'bar',
                        data: [2.0006, 5.0009, 9.0120, 2.6564, 2.8725, 7.0007, 1.756, 1.822, 4.8007, 1.8008, 6, 2.3]
                    },
                    {
                        name: '工资支出',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.92, 2.8262, 3.2563, 4.5201, 4.3000, 4.5221, 4.5221, 4.2340, 4.2300, 4.1605, 4.12, 4.6002]
                    },
                    {
                        name: '其它支出',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [0.92, 0.8262, 1.2563, 0.5201, 1.3000, 1.5221, 0.5221, 0.2340, 0.2300, 1.1605, 4.12, 2.6002]
                    }
                ]
            }
            myChart1.setOption(option)
        },
        makechart4() {
            const myChart2 = echarts.init(this.$refs.pay2)
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月'],
                    axisLine: {
                        lineStyle: {
                            color: '#FAFAFA'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '营业额',
                    axisLine: {
                        lineStyle: {
                            color: '#FAFAFA'
                        }
                    }
                },
                series: [{
                    data: [20, 30, 28, 50, 52, 61, 96],
                    type: 'line',
                    symbol: 'triangle',
                    symbolSize: 20,
                    lineStyle: {
                        color: '#5470C6',
                        width: 4,
                        type: 'dashed'
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#EE6666',
                        color: 'yellow'
                    }
                }]
            };
            myChart2.setOption(option)
        },
        // 页面放大时适应宽度
        suit() {
            this.oriw1 = document.getElementById('chart1').clientWidth
            this.oriw3 = document.getElementById('chart3').clientWidth
            this.oriw4 = document.getElementById('box10').clientWidth
            this.oriw5 = document.getElementById('chart5').clientWidth
            //thi.orih = document.getElementById('chart1').clientHeight
            setTimeout(() => {
                let w1 = (document.getElementById('chart1').clientWidth - this.oriw1)/2 + 'px'
                let w2 = (document.getElementById('chart2').clientWidth - this.oriw1)/2 + 'px'
                let w3 = (document.getElementById('chart3').clientWidth - this.oriw3)/2 + 80 + 'px'
                let w4 = (document.getElementById('box10').clientWidth - this.oriw4)/2 + 100 + 'px'
                let w5 = (document.getElementById('chart5').clientWidth - this.oriw5)/2 + 'px'
                //let h = (document.getElementById('chart1').clientHeight - this.orih)/2 + 'px'
                document.getElementById('chart1').style.setProperty('--padzy',w1)
                document.getElementById('chart2').style.setProperty('--padtzy',w2)
                document.getElementById('chart3').style.setProperty('--padszy',w3)
                document.getElementById('box10').style.setProperty('--padbox',w4)
                document.getElementById('chart5').style.setProperty('--padchart5',w5)
                //document.getElementById('chart1').style.setProperty('padsx','h')
            },500)
        },
        // 这个函数是屏幕恢复后 把各容器的padding复原
        res() {
            document.getElementById('chart1').style.setProperty('--padzy','0px')
            document.getElementById('chart2').style.setProperty('--padtzy','0px')
            document.getElementById('chart3').style.setProperty('--padszy','50px')
            document.getElementById('box10').style.setProperty('--padbox','100px')
            document.getElementById('chart5').style.setProperty('--padchart5','0px')
        },
        makechart3() {
            const myChart3 = echarts.init(this.$refs.pay3)
            const option = {
                title: {
                    text: '支出比例',
                    subtext: '单位：万',
                    left: 'center',
                    textStyle: {
                         fontWeight: '900',          //标题颜色
                         color: '#FAFAFA'
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [
                        {name: '加工厂支出',textStyle:{color:"#FAFAFA"}},
                        {name: '养殖支出',textStyle:{color:"#FAFAFA"}},
                        {name: '工资支出',textStyle:{color:"#FAFAFA"}},
                        {name: '其它支出',textStyle:{color:"#FAFAFA"}},
                    ]
                },
                series: [
                    {
                        name: '支出',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 2.23, name: '加工厂支出',textStyle:{color:"#FAFAFA"}},
                            {value: 7.35, name: '养殖支出',textStyle:{color:"#FAFAFA"}},
                            {value: 5.80, name: '工资支出',textStyle:{color:"#FAFAFA"}},
                            {value: 1.23, name: '其它支出',textStyle:{color:"#FAFAFA"}},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart3.setOption(option)
        },
        makechart5() {
            const myChart5 = echarts.init(this.$refs.pay5)
            const option = {
             tooltip: {
                 trigger: 'item',
                 formatter: '{a} <br/>{b} : {c} ({d}%)'
             },
             legend: {
                 left: 'center',
                 top: 'top',
                 data: [
                     {name:'一月',textStyle:{color:"#FAFAFA"}},
                     {name:'二月',textStyle:{color:"#FAFAFA"}},
                     {name:'三月',textStyle:{color:"#FAFAFA"}},
                     {name:'四月',textStyle:{color:"#FAFAFA"}},
                     {name:'五月',textStyle:{color:"#FAFAFA"}},
                 ]
             },
             toolbox: {
                 show: true,
                 feature: {
                     mark: {show: true},
                     dataView: {show: true, readOnly: false},
                     restore: {show: true},
                     saveAsImage: {show: true}
                 }
             },
             series: [
                 {
                     name: '月营业额(w)',
                     type: 'pie',
                     radius: [20, 100],
                     roseType: 'radius',
                     itemStyle: {
                         borderRadius: 1
                     },
                     label: {
                         show: false
                     },
                     emphasis: {
                         label: {
                             show: true
                         }
                     },
                     data: [
                         {value: 40, name: '一月'},
                         {value: 63, name: '二月'},
                         {value: 98, name: '三月'},
                         {value: 82, name: '四月'},
                         {value: 90, name: '五月'},
                     ]
                 }
             ]
            }
            myChart5.setOption(option)
         }
    }
}
</script>

<style lang="scss" scoped>
#chart1 {
    $padzy: var(--padzy,0px);
    padding: 0px $padzy;
}
#chart2 {
    $padtzy: var(--padtzy,0px);
    padding: 0px $padtzy;
}
#chart3 {
    $padszy: var(--padszy,50px);
    padding: 70px $padszy 0px $padszy;
}
.pay {
    color: whitesmoke;
}
#box10 {
    $padbox: var(--padbox,100px);
    box-sizing: border-box;
    padding: 30px $padbox;
}
.box8 
{
    box-sizing: border-box;
    padding-top: 30px;
}
#chart5 {
    $padchart5: var(--padchart5,0px);
    box-sizing: border-box;
    padding: 0px $padchart5;
}
</style>